<template>
  <div style="height: 100%;">
    <div>
      <button @click="exportExcel">导出</button>
    </div>
    <el-upload class="upload-demo" action=""
               :file-list="arrlist"
               :show-file-list="true"
                ref="firstUpload"
               :auto-upload="false"
               :on-change="uploadVideo"> 浏览...
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div id="luckysheet" style="margin:0px;padding:0px;width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import LuckyExcel from 'luckyexcel'
  import {exportExcel} from './export'
  import cellData from './cellData'
  import borderInfo from './borderInfo'
  import mergeData from './merge'
  import rowlen from './rowlen'
  import columnlen from './columnlen'
  import customHeight from './customHeight'
  import customWidth from './customWidth'

  export default {
    name: "index",
    data() {
      return {
        arrlist: [],
        name: '测试'
      }
    },
    mounted() {
      //配置项
      var options = {
        container: 'luckysheet', // 设定DOM容器的id
        title: 'Luckysheet Demo', // 设定表格名称
        lang: 'zh', // 设定表格语言// 不设置这一项的话操作列以及右键均显示为英文
        data: [
          //status为1的sheet页，重点是需要提供初始化的数据celldata
          {
            "name": "Cell",
            "index": "sheet_01",
            "order": 0,
            "status": 1,
            "celldata": cellData,
            config: {
              borderInfo: borderInfo,
              merge: mergeData,
              rowlen: rowlen, //表格行高
              columnlen: columnlen, //表格列宽
              customHeight: customHeight,
              customWidth: customWidth,
              rowhidden: {}, //隐藏行
              colhidden: {}, //隐藏列
              authority: {} //工作表保护
            }
          },
          //其他status为0的sheet页，无需提供celldata，只需要配置项即可
          {
            "name": "Data",
            "index": "sheet_02",
            "order": 1,
            "status": 0
          },
          {
            "name": "Picture",
            "index": "sheet_03",
            "order": 2,
            "status": 0
          }
        ]
      }
      window.luckysheet.create(options)
      // console.log(options)

    },
    methods: {
      // 上传
      uploadVideo(fileInfo) {
        console.log('fileInfo', fileInfo)
        let name = fileInfo.raw.name;
        let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length - 1];
        if (suffix != "xlsx") {
          alert("Currently only supports the import of xlsx files");
          return;
        }
        LuckyExcel.transformExcelToLucky(fileInfo.raw, function (exportJson, luckysheetfile) {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            alert("Failed to read the content of the excel file, currently does not support xls files!");
            return;
          }
          console.log('luckysheetfile', luckysheetfile)
          console.log(exportJson);
          window.luckysheet.destroy();

          window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            lang: 'zh',
            showinfobar: false,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator
          });
        });
      },
      exportExcel() {
        console.log('window.luckysheet.getAllSheets()', window.luckysheet.getAllSheets())
        exportExcel(window.luckysheet.getAllSheets(), this.name)
      }
    }
  }
</script>

<style scoped>

</style>
